<template>
  <div class="dashboard-container">
    <el-button @click="$router.push('/complexHeaderExport')"
      >复杂表头</el-button
    >
    <span> provide: {{ ps }} --- {{ name }} </span>

    <el-button @click="$router.push('/import')">导入</el-button>
    <el-button @click="exportV">导出</el-button>
    <!-- 自定义图片错误指令 渲染错误后展示默认图片 -->
    <el-button @click="isShow = !isShow">展 开</el-button>
    <Collage>
      <el-table v-show="isShow" style="width: 300px" :data="tableList">
        <el-table-column width="100px" label="图片名称" prop="name">
        </el-table-column>
        <el-table-column label="图片地址">
          <!-- 查看二维码 -->
          <template slot-scope="{ row }">
            <img
              @click="showQrCode(row.url)"
              v-imgError="url"
              style="width: 80px; height: 80px; border-radius: 50%"
              :src="row.url"
            />
          </template>
        </el-table-column>
      </el-table>
    </Collage>
    <!-- 查看二维码弹层 -->
    <el-dialog title="二维码" :visible.sync="showCodeDialog">
      <el-row type="flex" justify="center">
        <canvas ref="myCanvas" />
      </el-row>
    </el-dialog>
    <!-- 封装的图片组件 -->
    <ImgUpload />
    <!-- anime动画1 -->
    <h3 class="h3Write">
      <svg
        version="1.1"
        class="subtitle"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 229.2 69.6"
        style="enable-background: new 0 0 229.2 69.6"
        xml:space="preserve"
      >
        <defs>
          <clipPath id="websiteClip">
            <path
              d="M79.7,29.1C74.3,36,67.5,43.8,59.3,52.5c-7.1,7-11.8,11.2-13.8,12.6c-4.6,3.5-7.9,5.3-9.8,5.3h-0.4c-2.9,0-4.8-1-5.6-3
													c-0.1-0.5-0.2-0.8-0.2-1v-0.6c0-2.2,1.8-6.5,5.5-12.8l7.8-14.3C31.4,49.5,23.8,57,19.8,60.8c-1.8,0-3.4-0.6-4.8-1.8
													c-0.6-0.7-0.9-1.7-0.9-2.9c0-2.3,1.8-6.5,5.4-12.6c8-14.7,13.4-24.7,16.3-30.1h-0.2c-5.9,0.7-13,4.1-21.1,10c-1.4,0.9-3.4,2.7-6,5.5
													V29c0.5,1.3,1.3,2.2,2.5,2.9c1.5,0.5,3,0.7,4.5,0.7c0.2,0,0.6,0,0.9,0.1c0,0.9-1.6,1.9-4.8,3.1c-1.7,0.5-3.1,0.7-4.2,0.7H6.9
													c-2.5,0-4.2-2.8-4.9-8.4c-0.1-0.3-0.1-0.8-0.1-1.6v-1.1c0-2.5,0.9-4.5,2.8-5.9c1.8-1.7,4.1-3.4,7-5.1c4-2.3,9.3-4.5,15.8-6.6
													c4.8-1.2,8.6-1.8,11.5-1.8c1.5,0.2,2.9,0.8,4,1.8c1.7,1.6,2.6,3.6,2.6,5.9c0,0.3-2.3,4.5-6.9,12.6c-0.8,1.5-4.3,8-10.6,19.4v0.1
													c7.8-7.3,15.2-14.3,22.1-20.9C56,14,59.2,7.7,59.5,6.1c1.4,0.2,2.7,0.7,4,1.7c1.8,1.5,2.7,3.6,2.7,6.2v0.1
													C49.7,44,41.2,59.4,40.8,60.4c1.8-1.6,4.3-4.2,7.7-7.8c9.4-10.6,18.4-22,27.2-34C82,9.8,85.6,3.9,86.4,1c0.1-0.4,0.1-0.8,0.1-1.1
													v-0.1c0.1-0.1,0.1-0.1,0.2-0.1c1.5,0.4,3.1,1.4,4.9,3c1.8,2.3,2.8,4.1,2.8,5.3C91.5,13.2,86.6,20.2,79.7,29.1z M125.8,40
													c-0.7,1.3-1.2,2.3-1.6,3c-0.6,1-1.2,2.3-2,3.8l-2.1,3.7c-1.8,3.2-3.2,5.7-4.1,7.6c-1.5,2.8-4.1,3.4-7.7,2c-1.5-0.6-2.8-1.4-4-2.5
													c-1.2-1.2-2.1-2.3-2.5-3.4l-3.6,6.6c-4.5-0.4-6.3-2.4-5.6-6c-1.1,0.8-2.1,1.5-3,2.1C86,59,83,60.3,80.9,60.6
													c-0.7,0.1-1.3,0.2-1.8,0.2h-0.4c-1.8,0-3.4-0.7-4.7-2c-1.4-1.8-2.1-4.1-2.1-6.6v-0.6c0-3.1,1.1-7,3.2-11.5
													c3.5-7.4,8.1-12.8,13.8-16.2c1-0.6,2-1,3-1.5c0.9-0.4,1.4-0.6,1.6-0.6c0.7,0,1.9,0.2,3.4,0.6c0.7,0.2,1.5,0.4,2.2,0.7
													c2.5,1.2,3.8,3,3.8,5.4v0.4c0,1.6-0.6,3.5-1.9,5.7c-2.3,3.7-5.4,6.8-9.5,9.4l-8.3,0.2c-0.7,0.9-1.2,1.7-1.6,2.4
													c-1.5,2.7-2.3,5-2.6,6.9c0.1,0.3,0.4,0.5,0.9,0.5H80c1.4,0,3.9-0.9,7.6-2.6c2.6-1.2,5.4-2.9,8.3-5.1c0.4-0.3,0.8-0.6,1.2-0.9
													c0.6-1.2,1.1-2,1.4-2.6c0.7-1.4,2.2-4.1,4.5-8.3l0.7-1.4l0.8-1.4l1.6-2.9c1.2-2.3,2.3-4.2,3.2-5.9c5.4-9.8,8-15.1,7.9-15.9
													c2,0.2,3.6,1,4.8,2.6c1.3,1.5,1.8,3.2,1.7,5.2l-11.9,21.5c0.9-0.8,2-1.8,3.3-3l1.7-1.5l1.7-1.6c2.6-2.4,4.6-4.2,6-5.4
													c4.6,0.4,6.4,2.6,5.4,6.6c-0.4,1.5-1.2,3.4-2.4,5.7l-0.8,1.5L125.8,40z M85.4,38.8l4,0.2c0.9-0.3,1.7-0.7,2.4-1.2
													c0.3-0.2,0.8-0.6,1.5-1.3c0.7-0.8,1.2-1.6,1.6-2.4c0.7-1.5,1.1-2.8,1.1-3.9c0-0.7-0.2-1.1-0.6-1.3h-0.2c-0.8,0.1-1.8,0.7-3.1,1.8
													c-1.3,1.2-2.2,2.1-2.9,2.8C87.7,35.4,86.4,37.1,85.4,38.8z M119.9,35.9l-13.6,11.5c-0.3,0.2-0.6,0.4-0.9,0.6l-0.4,0.6
													c0.2,1.7,0.7,3,1.5,4c0.9,1,1.8,1.4,3,1.1L119.9,35.9z M227.8,43.1v0.6c0,1.2-0.4,2.2-1.1,3h-0.1c-0.2-0.7-0.6-1.3-1.2-1.8
													c-0.7-0.3-1.3-0.5-1.8-0.5H223c-3.2,0-9.8,2.8-19.8,8.5c-9,5.2-14.8,7.8-17.3,7.8h-0.3c-3.4,0-5.6-1.9-6.7-5.6
													c-0.2-1.1-0.4-2.2-0.4-3.1v-0.5c0-1.4,0.2-3,0.6-4.6c-4.3,3.9-9,8.2-14.3,13c-0.6,0.6-0.9,0.8-0.9,0.8c-1.7,0-3.1-0.5-4.4-1.5
													c-0.7-0.8-1.1-1.7-1.1-2.6v-0.6c0-1.7,1.3-5,4-9.8c-4.1,3.8-8.2,7.5-12.4,11.2c-2.3,2.2-3.6,3.3-3.7,3.3c-1.3,0-2.6-0.4-4-1.1
													c-1.2-0.8-1.8-1.9-1.8-3.2v-0.4c0-2.2,1.5-5.8,4.4-10.9c0.7-1.2,1.4-2.5,2.2-3.9c-2.6,1.1-4.9,2.2-7,3.3c0.3,1.7,0.5,3.2,0.5,4.7
													v0.3c0,3.4-0.9,6.4-2.7,8.9c-1.5,1.6-3.2,2.4-5.3,2.4h-0.4c-1.9,0-3.7-0.7-5.3-2.2c-0.8-0.9-1.4-1.8-1.7-2.6
													c-0.3-0.9-0.5-1.8-0.5-2.5v-0.4c0-0.9,0.2-1.9,0.6-3c0-0.1,0.1-0.2,0.3-0.4c2.5-2,5-3.8,7.5-5.4c-2-3.7-3-6-3-6.9c0-0.2,0-0.6,0-1.1
													c0-3,1.6-6.3,4.8-9.8c1.6-1.6,2.8-2.7,3.7-3.2c1.7-1.3,3.6-2.5,5.6-3.5c1.1-0.6,2.1-1.1,2.9-1.4c1.7,0.6,3.3,1.9,4.6,4
													c0.4,0.6,0.7,1.3,1,2.1l0.2,0.4c-2.8,0.9-5,1.8-6.8,2.9c-4.9,2.8-7.4,6.2-7.4,10.2c0,0.9,0.1,1.8,0.4,2.8c4.9-2.9,8.8-4.9,11.6-6
													c0.8-1.5,1.7-3,2.7-4.7c1.6-3,2.4-4.9,2.5-5.9h0.1c1.2,0.1,2.5,0.6,3.7,1.5c1,0.9,1.6,1.6,1.8,2c0.7,1.3,1.1,2.5,1.1,3.7l-0.1,0.3
													v0.4c-0.2,0.4-1.6,2.9-4.2,7.5l-5.2,9.1l12.1-11.1c0.7-0.4,1.4-0.6,1.8-0.6h0.4l9-16.4h-0.1c-2.4,0-4.5,0.1-6.4,0.2
													c-0.4-0.2-0.7-0.5-0.9-0.9c-1,1.1-2.2,2.2-3.4,3.5c-2.1-0.3-3.9-0.7-5.4-1.2c-0.5-0.2-1-0.4-1.6-0.6v-0.1c2.3-5.4,3.6-8.5,4-9.3
													c1.5-0.2,2.9-0.3,4.2-0.3h1.2c2.7,0,5.3,0.3,7.8,0.8v0.1c-0.4,0.4-2.1,2.1-4.9,5.1l7.3-0.8c3-5.5,4.5-8.6,4.5-9.3
													c1.2,0,2.5,0.6,4.1,1.8c1.5,1.5,2.3,3.3,2.3,5.4c0,0.4-0.2,1-0.6,1.6c1.2-0.1,2-0.1,2.6-0.1h2.8c0.1,0,0.1,0.1,0.1,0.2
													c-1.2,2.8-1.9,4.3-1.9,4.3h-0.1c-1.7-0.1-3.5-0.2-5.6-0.4l-16,28.7h0.1c7.9-7.4,12-11.1,12.1-11.2c0,0,0,0,0.1,0
													c0.7-1.4,1.6-2.9,2.5-4.4c1.1-1.6,2.6-3.4,4.5-5.4c2.2-2.2,4-3.6,5.4-4.3c1.4-0.9,3-1.8,4.9-2.5c0.2-0.1,0.3-0.1,0.4-0.1
													c1.8,0,3.8,0.5,5.9,1.4c2.5,1.2,3.7,3,3.7,5.5c0,3.2-2,6.9-6,11.2c-2.3,2.2-4.2,3.6-5.5,4.3c-0.4,0.1-0.7,0.1-0.7,0.1
													c-1.2,0-3.8,0-7.8,0.1c-2.1,2.8-3.5,6-4.2,9.4c0,0.3,0.6,0.6,1.7,0.7c0,0.1,0.2,0.1,0.7,0.1h0.5c0.1,0,0.1,0,0.2,0
													c3.1,0,7.8-2.7,13.8-8.1c5.1-4.6,8.7-7.5,10.9-8.8c2-1.1,3.7-1.7,5.1-1.7c4.1,0,7,1.7,8.6,5C227.7,41.5,227.8,42.4,227.8,43.1z
														M192.3,38.5c0.4,0,1.7,0,4.1,0.1c1.1-0.2,2.2-0.9,3.4-2c2.1-2.3,3.1-4.6,3.1-6.9c-0.1-0.8-0.3-1.2-0.7-1.2
													C199.4,29.3,196.1,32.7,192.3,38.5z M134.8,47.9c-0.7,0.5-1.6,1.3-2.7,2.3c-0.6,0.6-1,1.2-1.4,1.8c1.5-0.4,2.6-1,3.4-1.8
													c0.4-0.5,0.6-1,0.6-1.7V47.9z"
            />
          </clipPath>
        </defs>
        <path
          class="path"
          clip-path="url(#websiteClip)"
          d="M18.5,33.91S0,36.67,6.67,24.17c8-8.34,22.15-15.46,31.31-13.62,8.34,1-.95,9.34-8.81,24.5C23.34,46.29,15.08,55.23,18.5,57c1.67.86,12-8.3,21.33-20C49.55,24.8,58.23,9.57,61.17,9.5,67.83,9.33,49.88,35.43,40.83,52c-4.14,7.59-10.66,14.17-6.66,15.5C38,68.77,49.17,64,83,15.67c1.59-2.27,7-10.49,8.6-13"
          fill="none"
          stroke="#FFFFFF"
          stroke-width="15"
        />
        <path
          class="path"
          clip-path="url(#websiteClip)"
          d="M85.4,41.5s18.1-5.6,13.35-15.75c-2.89-6.18-9,.9-15.5,8.2,0,0-25.5,39.2,14.25,16,0,0,24.37-22.26,28.5-21.05,1.62,1.09-4.14,11-8,19-2.71,5.63-3,10.83-5.55,9.39-24,.28,15.13-45.9,9.21-48.09S94.4,63,94.4,63"
          fill="none"
          stroke="#FFFFFF"
          stroke-width="9"
        />
        <path
          class="path"
          clip-path="url(#websiteClip)"
          d="M150.24,20.5S138,26.75,136,31.75s-4.07,5,.43,13.1a9.25,9.25,0,0,1-.18,7.15c-1.75,3.5-2,9.75-7.75,5.75S134.24,42,150.24,37.5c0,0,4.41-4.3,8.51-8.6s-17.5,26-15.88,31.9L173.5,35.19,186.15,9.13s-28,50.42-25.1,51S178.75,38,195.5,41c0,0,20.9-14.33,5-15.75,0,0-26.5,15.25-17,31.25,0,0,8.5,3,18-4.5s22.5-21.2,24.75-4.1"
          fill="none"
          stroke="#FFFFFF"
          stroke-width="10"
        />
        <path
          class="path"
          clip-path="url(#websiteClip)"
          d="M171,9.13s-11.33,10.38-8,11.92,43-2.8,43-2.8"
          fill="none"
          stroke="#FFFFFF"
          stroke-width="13"
        />
      </svg>
    </h3>
    <!-- 动画2 -->
    <canvas class="fireworks"></canvas>
    <!-- css实现角标效果 -->
    <!-- <tag>未达到审核标准</tag> -->
    <!-- text-transform属性 -->
    <span class="textTransform">sshjkk,ASDFRFDW</span>
    <!-- 乌云闪电 -->
    <div class="container1">
      <div class="stormy"></div>
    </div>
    <!-- 数字变化动画 -->
    <el-input v-model="numAnim" style="width: 200px"></el-input>
    <span> 当前计数-计算属性： {{ showNumAnim }} </span>
    <span> 当前计数： {{ showNumber.toFixed(0) }} </span>
    <!-- 数组增加动画 -->
    <el-row style="margin: 10px">
      <el-button @click="add">添加数字</el-button>
      <el-button @click="del">删除数字</el-button>
      <el-button @click="Shuffle">扰乱数字</el-button>
      <el-row>
        <!-- <el-col style="margin:10px" :span="4">
         <el-button @click="getRandomNum(1,10,10)" >生成随机数 </el-button>
       </el-col> -->
        <el-col :offset="12">
          <transition-group
            tag="div"
            name="list"
            v-if="randomNumber.length > 0"
          >
            <span v-for="item in randomNumber" :key="item" class="list-item">
              {{ item }}
            </span>
          </transition-group>
          <span v-else> 请先生成随机数 </span>
        </el-col>
      </el-row>
    </el-row>
    <!-- 多维网格 -->
    <div>
      <el-button @click="MultCell">多维网格动态</el-button>
      <!-- <div class="container">
          <div v-for="cell in cells" :key="cell.id" class="cell">
            {{ cell.number }}
          </div>
        </div> -->
      <transition-group name="cell" tag="div" class="container">
        <div v-for="cell in cells" :key="cell.id" class="cell">
          {{ cell.number }}
        </div>
      </transition-group>
    </div>

    <!-- 交替动画列表  -->
    <el-input v-model="keyword"></el-input>
    <transition-group
      tag="ul"
      name="animalUl"
      :css="false"
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave"
    >
      <li v-for="(item, index) in showNames" :key="index" :data-index="index">
        {{ item }}
      </li>
    </transition-group>
    <!-- vue自带的过渡 -->
    <div>
      <el-button @click="showTran = !showTran">vue过渡</el-button>
      <transition name="slide-fade" appear>
        <div v-show="showTran">hello</div>
        <!-- <div  v-else> 你好 </div> -->
      </transition>
      <!-- 通过key来实现v-if和v-else -->
      <transition name="keyToIsShowOrHide" mode="out-in">
        <el-button :key="isEditing" @click="isEditing = !isEditing">
          {{ isEditing ? "Save" : "Edit" }}
        </el-button>
      </transition>
    </div>
    <!-- 两个元素的切换 -->
    <div>
      <div><button @click="isShow = !isShow">显示/隐藏</button></div>
      <transition name="why" mode="out-in">
        <h2 class="title" v-if="isShow">Hello World</h2>
        <h2 class="title" v-else>你好啊,李银河</h2>
      </transition>
    </div>
    <!-- animate.css -->
    <el-link
      @mouseout.native="isHideAnimate"
      @mouseover.native="isShowAnimate"
      :class="
        isAnimate
          ? 'animate__animated animate__heartBeat animate__infinite '
          : ''
      "
    >
      An animated element
    </el-link>
    <div class="dashboard-text">
      欢迎 <span style="color: #f56c6c">{{ user }} </span>进入分诊系统
      ，改系统可以通过收集患者病症信息，进而推荐相应的科室！
    </div>
    <h1>ES6的小技巧</h1>
    <el-row>
      <el-row type="flex">
        1. <el-col :span="16">原数组： {{ arr }}</el-col>
        <el-col>
          <el-button type="primary" @click="sortArr">打乱顺序</el-button>
        </el-col>
      </el-row>
      <el-row class="m10" type="flex">
        2.<el-col>随机整数范围1-10：&nbsp;&nbsp; {{ randomArr }}</el-col>
        <el-col>
          <el-button type="primary" @click="getrandomArr(1, 10)"
            >随机数</el-button
          >
          <el-button type="primary" @click="reset">清空随机数</el-button>
        </el-col>
        <el-col :span="6">最大值 : {{ max }}</el-col>
        <el-col :span="4">
          <el-button type="primary" @click="getMax">得到最大值</el-button>
        </el-col>
      </el-row>
      <el-row class="m10" type="flex">
        3.
        <el-col
          >去除数字之外的所有字符： <el-input v-model="str"></el-input>
        </el-col>
        <el-col>
          <el-button type="primary" @click="getNum">只得到数字</el-button>
        </el-col>
        <el-col>数字：{{ num }} </el-col> 3. 反转字符串或者单词
      </el-row>
      <el-row class="m10" type="flex">
        4.
        <el-col
          >反转字符串或者单词： <el-input v-model="str1"></el-input>
        </el-col>
        <el-col>
          <el-button type="primary" @click="reverse">二级反转</el-button>
        </el-col>
        <el-col>反转后：{{ reverseStr }} </el-col>
      </el-row>
      <el-row class="m10" type="flex">
        5.
        <el-col
          >将十进制转换为二进制或十六进制：
          <el-input v-model.number="num10" />
        </el-col>
        <el-col>
          <el-button @click="getNum2">二进制</el-button> {{ num2 }}
        </el-col>
        <el-col>
          <el-button @click="num16 = Number(num10).toString(16)"
            >16进制</el-button
          >
          {{ num16 }}
        </el-col>
      </el-row>
      <el-row class="m10" type="flex">
        6. <el-col>递归求数组的和{{ recursionList }}</el-col>
        <el-col>
          <el-button @click="getRecursionList(recursionList)">求和</el-button>
          结果为： {{ resultRecursionList }}
        </el-col>
      </el-row>
      <!-- 位运算 -->
      <el-row class="m10" type="flex">
        7. <el-col>位运算求数组中出现一次的值{{ onceList }}</el-col>
        <el-col>
          <el-button @click="getOnceList(onceList)">出现一次的值</el-button>
          结果为： {{ onceList }}
        </el-col>
      </el-row>
    </el-row>
    <!-- 动画还可以这样？长知识了🤔 -->
    <p>Hover Me - You are a pig!</p>

    <CustomImage />
    <!-- 富文本编辑 -->
    <!-- <TinytEdit/> -->
  </div>
</template>

<script>
import anime from "animejs";
import { mapGetters } from "vuex";
import { getUserName } from "@/utils/auth";
import TinytEdit from "./component/TinymceEditor.vue";
import CustomImage from "@/components/custom-Image/index.vue";
import { objectExpression } from "@babel/types";
import ImgUpload from "@/components/imgUpload/imgUpload";
import QRCode from "qrcode";
export default {
  name: "Dashboard",
  inject: ["ps", "name"],
  computed: {
    ...mapGetters(["userType"]),
    // 变化的数字
    showNumAnim() {
      return this.showNumber.toFixed(0);
    },
    // 交替变化的列表
    showNames() {
      return this.names.filter((item) => item.indexOf(this.keyword) != -1);
    },
  },
  components: {
    TinytEdit,
    CustomImage,
    ImgUpload,
  },
  mounted() {
    this.animateWrite(); // 动画1
    this.animatexplosionBall(); // 动画2
  },
  data() {
    return {
      isShow: false,
      showCodeDialog: false,
      url: "https://t14.baidu.com/it/u=1682967921,618817946&fm=224&app=112&size=w931&n=0&f=JPEG&fmt=auto?sec=1661619600&t=abe7e9f72a7f138100417efc74560260",
      tableList: [
        {
          name: "图片一",
          url: "https://t14.baidu.com/it/u=1682967921,618817946&fm=224&app=112&size=w931&n=0&f=JPEG&fmt=auto?sec=1661619600&t=abe7e9f72a7f138100417efc74560260",
        },
        {
          name: "图片二",
          url: "https://img1.baidu.com/it/u=724179003,4096104503&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1661619600&t=d9a93788cadefc7b0ae0baa21016836c",
        },
        {
          name: "图片三",
          url: "https://blog.csdn.net/TATOQOQ/article/details/126155658",
        },
        {
          name: "GIF图片",
          url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp3.itc.cn%2Fimages01%2F20210212%2F4db687a37e924267b7a787c98efe7d79.gif&refer=http%3A%2F%2Fp3.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664521432&t=f24e6f6e58f01d0a3e1cf63d79d7c09b",
        },
      ],
      names: [
        "有一天",
        "有二天",
        "有三天",
        "有四天",
        "有五天",
        "有六天",
        "有七天",
        "有八天",
      ],
      keyword: "",
      cells: Array.apply(null, { length: 81 }).map(function (_, index) {
        return {
          id: index,
          number: (index % 9) + 1,
        };
      }), // 多维数组
      numCounter: 10,
      isEditing: true,
      numAnim: 0,
      showNumber: 0,
      randomNumber: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      onceList: "",
      resultRecursionList: "",
      recursionList: [1, 2, 3.4, 5, 1],
      isShow: true,
      showTran: true,
      isAnimate: false,
      user: getUserName(),
      activeName: 1,
      arr: [31, 2, 3, "排序", "😄"],
      randomArr: [],
      max: "",
      str: "yannnianjunzi，温其如玉，一个亿，1000000000😄",
      num: "",
      str1: "",
      reverseStr: "",
      num10: "",
      num2: "",
      num16: "",
      exportData: [
        { name: "张三", age: 13, sex: "男" },
        { name: "里斯本", age: 18, sex: "女" },
        { name: "莉丝", age: 23, sex: "男" },
      ], // 导出数据
    };
  },
  methods: {
    // 二维码弹层展示
    showQrCode(url) {
      console.log(url);
      // url存在的情况下 才弹出层
      if (url) {
        this.showCodeDialog = true;
        // 数据更新了 但是弹层不会立刻出现，页面的渲染是异步的！！！！
        this.$nextTick(() => {
          QRCode.toCanvas(this.$refs.myCanvas, url);
        });
      } else {
        this.$message.warning("上传图片后才可以显示");
      }
    },
    // 导出 // 下载了两个包 npm install script-loader -S -D  和  npm install xlsx file-saver -S
    exportV() {
      let headers = {
        姓名: "name",
        年龄: "age",
        性别: "sex",
      };
      const header = Object.keys(headers);
      // const content = this.exportData.map(obj => {
      //   return Object.keys(headers).map(item => { // headers[item] 得到中文对应的英文
      //     return obj[headers[item]]
      //   })
      // })
      const content = this.exportData.map((obj) =>
        Object.keys(headers).map((item) => obj[headers[item]])
      );
      // console.log(header)
      // console.log(content)
      import("@/vendor/Export2Excel").then((excel) => {
        excel.export_json_to_excel({
          header: header, // ['姓名', '年龄', '性别'], //表头 必填
          data: content, // [['章三', 13, '男'], ['章三', 13, '男']], //具体数据 必填 [[]]
          filename: "excel-list", //非必填 导出文件名称
          autoWidth: true, //非必填
          bookType: "xlsx", //非必填
        });
      });
    },

    // 数组增加动画
    randomIndex() {
      // 随机位置索引
      return Math.floor(Math.random() * this.randomNumber.length);
    },
    add() {
      // console.log(this.randomIndex())
      this.randomNumber.splice(this.randomIndex(), 0, this.numCounter++);
    },
    del() {
      this.randomNumber.splice(this.randomIndex(), 1);
    },
    Shuffle() {
      this.randomNumber = this._.shuffle(this.randomNumber);
    },
    getRandomNum(min, max, len) {
      // 生成10个随机数 / 一个随机数
      this.randomNumber = [];
      if (len) {
        for (let i = 0; i <= len; i++) {
          this.randomNumber.push(
            Math.floor(Math.random() * (max - min + 1)) + min
          );
        }
      } else {
        this.randomNumber.push(
          Math.floor(Math.random() * (max - min + 1)) + min
        );
      }
    },
    // 数组增加动画结束

    // 多维网格动态
    MultCell() {
      this.cells = this._lodash.shuffle(this.cells);
    },

    // 手写动画字 动画1
    animateWrite() {
      // console.log(anime)
      const svgPath = document.querySelectorAll(".path");
      const svgText = anime({
        targets: svgPath,
        loop: true,
        direction: "alternate",
        strokeDashoffset: [anime.setDashoffset, 0],
        easing: "easeInOutSine",
        duration: 700,
        delay: (el, i) => {
          return i * 500;
        },
      });
    },
    // 动画2
    animatexplosionBall() {
      window.human = false;

      var canvasEl = document.querySelector(".fireworks");
      var ctx = canvasEl.getContext("2d");
      var numberOfParticules = 30;
      var pointerX = 0;
      var pointerY = 0;
      var tap =
        "ontouchstart" in window || navigator.msMaxTouchPoints
          ? "touchstart"
          : "mousedown";
      var colors = ["#FF1461", "#18FF92", "#5A87FF", "#FBF38C"];
      // var colors = ['#ccc', '#hhhh', '#5A87FF', '#FBF38C'];

      function setCanvasSize() {
        canvasEl.width = window.innerWidth * 2;
        canvasEl.height = window.innerHeight * 2;
        canvasEl.style.backgroundColor = "black";
        // canvasEl.style.width = window.innerWidth + 'px';
        // canvasEl.style.height = window.innerHeight + 'px'; // 改变大小
        canvasEl.style.width = 385 + "px";
        canvasEl.style.height = 203 + "px";
        canvasEl.getContext("2d").scale(2, 2);
      }

      function updateCoords(e) {
        pointerX = e.clientX || e.touches[0].clientX;
        pointerY = e.clientY || e.touches[0].clientY;
      }

      function setParticuleDirection(p) {
        var angle = (anime.random(0, 360) * Math.PI) / 180;
        var value = anime.random(50, 180);
        var radius = [-1, 1][anime.random(0, 1)] * value;
        return {
          x: p.x + radius * Math.cos(angle),
          y: p.y + radius * Math.sin(angle),
        };
      }

      function createParticule(x, y) {
        var p = {};
        p.x = x;
        p.y = y;
        p.color = colors[anime.random(0, colors.length - 1)];
        p.radius = anime.random(16, 32);
        p.endPos = setParticuleDirection(p);
        p.draw = function () {
          ctx.beginPath();
          ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
          ctx.fillStyle = p.color;
          ctx.fill();
        };
        return p;
      }

      function createCircle(x, y) {
        var p = {};
        p.x = x;
        p.y = y;
        p.color = "#FFF";
        p.radius = 0.1;
        p.alpha = 0.5;
        p.lineWidth = 6;
        p.draw = function () {
          ctx.globalAlpha = p.alpha;
          ctx.beginPath();
          ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
          ctx.lineWidth = p.lineWidth;
          ctx.strokeStyle = p.color;
          ctx.stroke();
          ctx.globalAlpha = 1;
        };
        return p;
      }

      function renderParticule(anim) {
        for (var i = 0; i < anim.animatables.length; i++) {
          anim.animatables[i].target.draw();
        }
      }

      function animateParticules(x, y) {
        var circle = createCircle(x, y);
        var particules = [];
        for (var i = 0; i < numberOfParticules; i++) {
          particules.push(createParticule(x, y));
        }
        anime
          .timeline()
          .add({
            targets: particules,
            x: function (p) {
              return p.endPos.x;
            },
            y: function (p) {
              return p.endPos.y;
            },
            radius: 0.1,
            duration: anime.random(1200, 1800),
            easing: "easeOutExpo",
            update: renderParticule,
          })
          .add({
            targets: circle,
            radius: anime.random(80, 160),
            lineWidth: 0,
            alpha: {
              value: 0,
              easing: "linear",
              duration: anime.random(600, 800),
            },
            duration: anime.random(1200, 1800),
            easing: "easeOutExpo",
            update: renderParticule,
            offset: 0,
          });
      }

      var render = anime({
        duration: Infinity,
        update: function () {
          ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
        },
      });

      document.addEventListener(
        tap,
        function (e) {
          window.human = true;
          render.play();
          updateCoords(e);
          animateParticules(pointerX, pointerY);
        },
        false
      );

      var centerX = window.innerWidth / 2;
      var centerY = window.innerHeight / 2;

      function autoClick() {
        if (window.human) return;
        animateParticules(
          anime.random(centerX - 50, centerX + 50),
          anime.random(centerY - 50, centerY + 50)
        );
        anime({ duration: 200 }).finished.then(autoClick);
      }

      autoClick();
      setCanvasSize();
      window.addEventListener("resize", setCanvasSize, false);
    },

    // 交替出现的列表
    beforeEnter(el) {
      // console.log('beforeenter',el)
      el.style.opcity = 0;
      el.style.height = 0;
    },
    enter(el, done) {
      // console.log('enter',el)
      // console.log(done)
      this.gsap.to(el, {
        opcity: 1,
        height: "1.5em",
        delay: el.dataset.index * 0.5,
        onComplete: done,
      });
    },
    leave(el, done) {
      this.gsap.to(el, {
        opcity: 0,
        height: 0,
        delay: el.dataset.index * 0.5,
        onComplete: done,
      });
    },
    // 展示动画
    isShowAnimate() {
      this.isAnimate = true;
      // debugger
    },
    // 隐藏动画
    isHideAnimate() {
      this.isAnimate = false;
    },
    // 打乱数组顺序
    sortArr() {
      this.arr.sort(() => 0.5 - Math.random());
      // console.log(Math.PI)
    },
    // 获取指定范围内的随机数
    getrandomArr(min, max) {
      const num = Math.floor(Math.random() * (max - min + 1)) + min;
      // console.log(num)
      this.randomArr.push(num);
    },
    // 清空随机数
    reset() {
      this.randomArr = [];
    },
    // 得到最大值
    getMax() {
      // this.max =  Math.max.apply(Math,this.randomArr)
      this.max = Math.max(...this.randomArr);
    },
    // 只得到数字
    getNum() {
      this.num = this.str.replace(/\D/g, "");
      // this.num = this.str.replaceAll(/\D/,'')
    },
    // 反转字符串或者单词：
    reverse() {
      this.reverseStr = this.str1.split("").reverse().join("");
      console.log(this.reverseStr);
    },
    getNum2() {
      this.num2 = Number(this.num10).toString(2);
    },
    // 递归求数组的和
    getRecursionList(list) {
      function getSum(i) {
        console.log(list[i]);
        return i >= list.length ? 0 : list[i] + getSum(i + 1);
      }
      // console.log(getSum(0))
      // return getSum(0)  // getSum(0) 相当于调用了这个函数
      this.resultRecursionList = getSum(0);
    },
  },
  watch: {
    // 变化的数字
    numAnim(newVal) {
      // console.log(newVal)
      this.gsap.to(this, { duration: 1, showNumber: newVal });
    },
  },
};
</script>

<style lang="scss" scoped>
// 乌云闪电
.container1 {
  width: 170px;
  height: 170px;
  background: rgba(73, 74, 95, 1);
  position: relative;
  .stormy {
    // 乌云
    width: 50px;
    height: 50px;
    position: absolute;
    left: 80px;
    top: 50px;
    margin-left: -60px;
    background: #222;
    border-radius: 50%;
    box-shadow: #222 64px -15px 0 -5px, #222 25px -25px, #222 30px 10px,
      #222 60px 15px 0 -10px, #222 85px 5px 0 -5px;
    animation: stormy 5s ease-in-out infinite;
    @keyframes stormy {
      50% {
        transform: translateY(-20px);
      }
    }
    &::after {
      // 乌云阴影
      content: "";
      width: 120px;
      height: 20px;
      position: absolute;
      left: 5px;
      bottom: -35px;
      background: #333;
      border-radius: 50%;
      opacity: 0.8;
      transform: scale(0.6);
      animation: stormy_shadow 5s ease-in-out infinite;
    }
    @keyframes stormy_shadow {
      50% {
        transform: translateY(20px) scale(1);
        opacity: 0.3;
      }
    }
    &::before {
      // 闪电样式
      content: "";
      display: block;
      width: 0;
      height: 0;
      position: absolute;
      left: 57px;
      top: 30px;
      border-left: 0px solid transparent;
      border-right: 7px solid transparent;
      border-top: 43px solid yellow;
      box-shadow: yellow -7px -32px;
      transform: rotate(13deg);
      transform-origin: 50% 0px;
      animation: stormy_thunder 2s steps(1, end) infinite;
    }
    @keyframes stormy_thunder {
      0% {
        transform: rotate(20deg);
        opacity: 1;
      }
      5% {
        transform: rotate(-30deg);
        opacity: 1;
      }
      10% {
        transform: rotate(0deg);
        opacity: 1;
      }
      15% {
        transform: rotate(-34deg);
        opacity: 0;
      }
    }
  }
}

// 乌云闪电结束

// 改变英文大小写
.textTransform {
  text-transform: capitalize;
}

// vue动画 通过transtion的key实现
.keyToIsShowOrHide-enter .keyToIsShowOrHide-leave-to {
  opacity: 0;
  transform: translateX(20px);
}
.keyToIsShowOrHide-enter-active .keyToIsShowOrHide-enter-active {
  transition: all 1s ease;
}
// 结束

// 数字变化
.list-item {
  display: inline-block;
  margin-right: 10px;
  transition: transform 1s ease;
}
.list-enter-active,
.list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}
.list-leave-active {
  // 离开的时候让 元素脱离文档流，不占那个位置不然无法平滑过渡
  position: absolute;
}
// .list-move{ // move 在离开的时候
//   transition: transform 1s ease;
// }
// 数字变化结束

// 多维网格
.container {
  display: flex;
  flex-wrap: wrap;
  width: 238px;
  margin: 10px 0;
  .cell {
    display: flex;
    // justify-content: center;
    justify-content: space-around;
    align-items: center;
    width: 25px;
    height: 25px;
    border: 1px solid #aaa;
    margin-right: -1px;
    margin-bottom: -1px;
  }
  .cell:nth-child(3n) {
    margin-right: 0;
  }
  .cell:nth-child(27n) {
    margin-bottom: 0;
  }
  .cell-move {
    transition: transform 1s;
  }
}
// 多维网格结束

// anime动画1
.h3Write {
  height: 30vh;
  width: 100%;
  background-color: #35dad2;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}
h3 {
  svg {
    width: 20em;
  }
}
// 动画1结束

// css实现角标
tag {
  // cursor: zoom-in;
  color: #fff;
  // background: #EA3447;
  background: linear-gradient(
      to right bottom,
      rgba(255, 255, 255, 0.4),
      transparent
    )
    rgba(20, 30, 41, 0.76);
  background-blend-mode: soft-light;
  font-size: 10px;
  padding: 2px 6px;
  line-height: 16px;
  border-radius: 4px 4px 4px 0px;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    width: 3px;
    height: 3px;
    // background: #BB2A39;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
    background-color: inherit;
    left: 0;
    bottom: -3px;
    clip-path: polygon(0 0, 100% 0, 100% 100%); /*三角*/
  }
}
// 角标结束

.slide-fade-enter-active {
  transition: all 1s ease;
}
.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(100px);
  opacity: 0;
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.information {
  width: 300px;
  height: 300px;
  border: 1px solid red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
::v-deep .el-collapse-item__header,
::v-deep .el-collapse-item__wrap {
  padding-left: 10px;
}
.m10 {
  margin-top: 10px;
}
p {
  position: relative;
  //font-family: monospace 表示等宽字体，
  //每个字符占据的宽度是一样，因为我们使用了 26ch 来充当 <p> 元素的宽度，
  //而 Hover Me - You are a pig 这一段文字算上空格刚好 26 个字符，26ch 刚好表示这一段文本的长度
  font-family: monospace;
  width: 26ch; // ch 是 CSS 当中的一个相对单位，这一单位代表元素所用字体 font 中 “0” 这一字形的宽度
  line-height: 1;
  animation: typing 3s steps(15, end);
  animation-fill-mode: both;
  animation-play-state: paused;
  overflow: hidden;
}
p:hover {
  animation-play-state: running;
}
p::before {
  position: absolute;
  content: "";
  width: 4px;
  top: 0;
  bottom: 0;
  right: 0;
  animation: blink 2.8s linear infinite;
}
@keyframes blink {
  0%,
  50% {
    border-right: 4px solid transparent;
  }
  50%,
  100% {
    border-right: 4px solid #000;
  }
}
@keyframes typing {
  from {
    width: 11ch;
  }
  to {
    width: 26ch;
  }
}

// 两个元素的切换
.app {
  width: 200px;
  margin: 0 auto;
}

.title {
  display: inline-block;
}

.why-enter-from,
.why-leave-to {
  opacity: 0;
}

.why-enter-active,
.why-leave-active {
  transition: opacity 1s ease;
}

.why-enter-active {
  animation: bounce 1s ease;
}

.why-leave-active {
  animation: bounce 1s ease reverse;
}

@keyframes bounce {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}
</style>
